<template>
  <div class="boxes">
    <SetApproval v-if="visible" style="height: 100%;" @success="handleEditSuccess"/>
  </div>
</template>

<script>
import {defineComponent, reactive, toRefs} from "vue";
import utils from "@/common/utils/utils";
import SetApproval from "@/views/Approval/SetApproval/index.vue";


export default defineComponent({
  name: "approvalSetting",
  components: {SetApproval},
  setup() {


    const mainAppParamsId = window?.microApp?.getData()?.id;

    const state = reactive({
      visible: false,
    });

    const handleEditSuccess = () => {
      if (window?.microApp?.getData()?.isMainDrawer) {
        window?.microApp?.getData()?.closeApproval();
        window?.microApp?.getData()?.closeDrawer();
      }
    }

    const init = () => {
      state.visible = true
      const currentParams =  {
        id:mainAppParamsId
      }
      utils.setStorage("approval_id", JSON.stringify(currentParams));
    };

    init();

    return {
      ...toRefs(state),
      handleEditSuccess,

    };
  },
});

</script>
<style lang="less" scoped>
#app {
  background: rgba(240, 242, 245, 0);
}

.boxes {
  height: calc(100vh - 50px);
}

:deep(ant-drawer-header) {
  height: 50px;
}
</style>